import React, { useState } from 'react';
import { connect, Dispatch, history } from 'umi';
import { Layout, Menu } from 'antd';
import { FundOutlined } from '@ant-design/icons';
import AppDesign from './AppDesign';

const { Content, Sider } = Layout;

interface UserProps {
  dispatch: Dispatch;
  submitting?: boolean;
}

const rootPath = '/design';
const Design: React.FC<UserProps> = (props: any) => {
  const components: Array<any> = [
    {
      key: 'appDesign', name: '移动端设计', component: <AppDesign />,
    },
  ];
  const { id } = props.match.params;
  const [key, setKey] = useState<string>(id !== undefined && id !== '' ? id : 'appDesign');
  const { component } = components.find(v => v.key === key);
  // 页面路由跳转
  const jump = (k: string) => {
    setKey(k);
    if (k === rootPath) {
      history.push(`/${rootPath}`);
    } else {
      history.push(`/${rootPath}/${k}`);
    }
  };

  return (
    <Layout style={{ background: '#fff', height: 'calc(100vh - 84px)', overflow: 'hidden' }}>
      <Sider width={146}>
        <Menu
          mode='inline'
          selectedKeys={[key]}
          style={{ height: '100%' }}
          onClick={(e) => jump(e.key)}
        >
          {components.map((c) => {
            const { name } = c;
            return (
              <Menu.Item key={c.key}>
                <FundOutlined style={{ marginRight: '5px' }} />
                {name}
              </Menu.Item>
            );
          })}
        </Menu>
      </Sider>
      <Content>{component}</Content>
    </Layout>
  );
};

export default connect(() => ({}))(Design);
